<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>index</title>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="logo">
                test
            </div>
            <div class="language">
                    <ul>
                        <li>English</li>
                        <!-- <li>中文</li> -->
                    </ul>
            </div>
            <div class="nav">
                <div class="btn">
                </div>
                <ul>
                    <li>
                        <a href="about.html" style="color: #fff">关于</a>
                    </li>
                    <li>
                        <a href="team.html" style="color: #fff">团队</a>
                    </li>
                    <li>
                        <a href="cases.html" style="color: #fff">案例</a>  
                    </li>
                    <li>
                        <a href="news.html" style="color: #fff">新闻</a>
                    </li>
                    <li>
                        <a href="contact.html" style="color: #fff">联系</a>
                    </li>
                    <li>
                        <a href="employ.html" style="color: #fff">招聘</a>
                    </li>
                </ul>
            </div>
            
        </div>
    </div>
    <div class="firstPage">
        <div class="block">
            <a href="javascript:;" class="keyscroll" id="aKeyscroll">
                <span></span>
            </a>
        </div>
       
    </div>
    <div class="pages">
        <div class="pages-first">
            <ul>
                <li>
                    <img data-src="img/front1.jpg" alt="">
                </li>
                <li>
                    <img data-src="img/SENSORO.jpg" alt="">
                </li>
                <li>
                    <img data-src="img/front1.jpg" alt="">
                </li>
                <li>
                    <img data-src="img/SENSORO.jpg" alt="">
                </li>
                <li>
                    <img data-src="img/front1.jpg" alt="">
                </li>
            </ul>
            <div class="pagenation">
                <div class="shadow"></div>
                <div class="circle">
                    <canvas id="canvas" width="82" height="82"></canvas>
                </div>
                <div class="page-link">
                    <a href="javascript:;" class="pl1"></a>
                    <a href="javascript:;" class="pl2"></a>
                    <a href="javascript:;" class="pl3"></a>
                    <a href="javascript:;" class="pl4"></a>
                    <a href="javascript:;" class="pl5"></a>
                </div>
                <!-- <div class="page-num">
                    <span>1</span>/5
                </div> -->
            </div>
        </div>
        <div class="pages-news">
            <div class="container">
                <ul>
                    <li>
                        <a href="#">
                            <span class="news-date">07/25<small>2019</small></span>
                            <span class="news-section">
                                test随便写写，天气不错的样子，但是我忘记开窗了，可怕
                            </span>
                            <span class="news-author">
                                <img src="img/SENSORO.jpg" alt="北极光创投" width="72" height="72">
                                北极光创投
                            </span>
                            <span class="news-bline"></span>
                            <span class="news-img"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="news-date">06/23<small>2019</small></span>
                            <span class="news-section">
                                天气不错的样子，但是我忘记开窗了，可怕
                            </span>
                            <span class="news-author">
                                <img src="img/SENSORO.jpg" alt="北极光创投" width="72" height="72">
                                test创投
                            </span>
                            <span class="news-bline"></span>
                            <span class="news-img"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="news-date">08/24<small>2019</small></span>
                            <span class="news-section">
                                北极光创投，但是我忘记开窗了，可怕
                            </span>
                            <span class="news-author">
                                <img src="img/front1.jpg" alt="北极光创投" width="72" height="72">
                                testtest
                            </span>
                            <span class="news-bline"></span>
                            <span class="news-img"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pages-achievement">
            <h2>成就世界级的中国企业家，培育世界级的中国企业</h2>
            <div class='achievement container'>
                <div class="achieve">
                    <div class="achive-text">
                        300<small>亿</small>
                    </div>
                    <div>管理资产</div>
                </div>
                <div class="achieve">
                    <div class="achive-text">
                        200<small>家</small>
                    </div>
                    <div>投资创业公司</div>
                </div>
                <div class="achieve">
                    <div class="achive-text">
                        40+ 
                    </div>
                    <div>成功退出</div>
                </div>
                <p class="figure">截止2017年9月30日</p>
            </div>
        </div>
        <div class="pages-partner">
            <a href="#">
                <h2>创业企业的成长伙伴</h2>
                <p>
                    <span class="l">经验丰富的投资团队</span>
                    <span class="r">稳健务实的投后团队</span>
                </p>
            </a>
        </div>
        <div class="pages-employment">
            <h2>携手共进，同创未来</h2>
            <div class="container">
                <div class="l">
                    <h3>提交BP</h3>
                    <div class="el-tab">
                        <a href="javascript:;" class="active">
                            <i></i>
                            <span>TMT</span>
                        </a>
                        <a href="javascript:;">
                                <i></i>
                            <span>先进技术</span>
                        </a>
                        <a href="javascript:;">
                                <i></i>
                            <span>医疗健康</span>
                        </a>
                    </div>
                    <div class="el-content current">
                        <p>
                            互联网娱乐、企业互联网、
                            <br />
                            交易平台、互联网+垂直领域、智能系统
                        </p>
                        <a href="#" class="mail">839722073@qq.com</a>
                    </div>
                    <div class="el-content">
                        <p>
                            天气不错的样子、心情呢
                            <br />
                            我不知道、互联网+垂直领域、智能系统
                        </p>
                        <a href="#" class="mail">839722073@qq.com</a>
                    </div>
                    <div class="el-content">
                        <p>
                            竟然没雨、感觉又被骗了、
                            <br />
                            交易平台、互联网+垂直领域、智能系统
                        </p>
                        <a href="#" class="mail">839722073@qq.com</a>
                    </div>
                </div>
                <div class="r">
                    <h3>工作机会</h3>
                    <h4>在北极光，我们倡导分享、平等和独立</h4>
                    <p>
                        为员工提供高端医疗保障及家庭式度假旅游；
                        <br />
                        鼓励员工积极健身和不断学习进取。
                    </p>
                    <a href="#" class="mail">839722073@qq.com</a>
                </div>
            </div>
        </div>
        <div class="pages-address">
            <div class="container">
                <a href="#">
                    <img class="source-img" src="img/bj.jpg" alt="北京" data-src="img/bj.jpg">
                    <img class="hover-img" src="img/map-bj_zh.jpg" alt="北京" data-src="img/map-bj_zh.jpg">
                    <span>北京</span>
                </a>
                <a href="#">
                    <img class="source-img" src="img/sh.jpg" alt="上海" data-src='img/sh.jpg'>
                    <img class="hover-img" src="img/map-sh_zh.jpg" alt="上海" data-src='img/map-sh_zh.jpg'>
                    <span>上海</span>
                </a>
                <a href="#">
                    <img class="source-img" src="img/suzhou.jpg" alt="苏州" data-src='img/suzhou.jpg'>
                    <img class="hover-img" src="img/map-suzhou_zh.jpg" alt="苏州" data-src='img/map-suzhou_zh.jpg'>
                    <span>苏州</span>
                </a>
                <a href="#">
                    <img class="source-img" src="img/bj.jpg" alt="深圳" data-src='img/bj.jpg'>
                    <img class="hover-img" src="img/map-bj_zh.jpg" alt="深圳" data-src='img/map-bj_zh.jpg'>
                    <span>深圳</span>
                </a>
                <a href="#">
                    <img class="source-img" src="img/sh.jpg" alt="香港" data-src='img/sh.jpg'>
                    <img class="hover-img" src="img/map-sh_zh.jpg" alt="香港" data-src='img/map-sh_zh.jpg'>
                    <span>香港</span>
                </a>
                <a href="#">
                    <img class="source-img" src="img/suzhou.jpg" alt="Menlo Park" data-src='img/suzhou.jpg'>
                    <img class="hover-img" src="img/map-suzhou_zh.jpg" alt="Menlo Park" data-src='img/map-suzhou_zh.jpg'>
                    <span>Menlo Park</span>
                </a>
            </div>
        </div>
        <div class="pages-about">
            <img class="scrolltr" src="img/about.jpg" alt="极光知识库">
            <h2>北极光知识库</h2>
            <p>
                企业家创业路上的生存手册，
                <br />
                从人力资源、财务、市场、法务各角度提供创业的支持和帮助！
            </p>
            <a href="#" class="more">了解</a>
        </div>
        <div class="footer"> 
        </div>
    </div>
</body>
<script src="util/jquery1.9.1.min.js"></script>
<script src="js/main.js"></script>
<script>
    $(function(){
        $('body').addClass('ohidden');
        $('html ,body').animate({ scrollTop: -1}, 150);
        var $img = $('.pages-first img');
        var $li = $('.pages-first li');
        var $as = $('.page-link a');
        // canvas
        var c=document.querySelector('canvas'),
        ctx=canvas.getContext('2d');
        var mW = c.width = 82;
        var mH = c.height = 82;
        var lineWidth = 2;
        var r = mW / 2 - 1 ; //中间位置
        var cR = r - 4 * lineWidth + 8; //圆半径
        var startAngle = -(1 / 2 * Math.PI); //开始角度
        var endAngle = startAngle + 2 * Math.PI; //结束角度
        var xAngle = 1 * (Math.PI / 1000); //偏移角度量
        var fontSize = 22; //字号大小
        var tmpAngle = startAngle; //临时角度变量
        var pageNum;
        //渲染函数
        var rander = function(){

          if(tmpAngle >= endAngle){
            // return;
            tmpAngle = startAngle;
          }else if(tmpAngle + xAngle > endAngle){
            tmpAngle = endAngle;
          }else{
            tmpAngle += xAngle;
          }
          ctx.clearRect(0, 0, mW, mH);
        
          //画圈
          ctx.beginPath();
          ctx.lineWidth = lineWidth;
          ctx.strokeStyle = '#fff';
          ctx.arc(r, r, cR, startAngle, tmpAngle);
          ctx.stroke();
          ctx.closePath();
        
          //写字
          ctx.fillStyle = '#fff';
          ctx.font= fontSize + 'px Microsoft Yahei';
          ctx.textAlign='center';
          pageNum = parseInt(Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100)/20) + 1;
          if(pageNum == 6){
              pageNum = 1
          }
          //   图片

          
          $($li[pageNum-1]).addClass('imgfadeIn').siblings().removeClass('imgfadeIn');
          $($as[pageNum-1]).addClass('active').siblings().removeClass('active');

          ctx.fillText( 
            pageNum + '/5', r, r + fontSize /3
              );
       
          
            requestAnimationFrame(rander);
        };

        c.addEventListener('click', function(e){
            console.log(e);
            p = getEventPosition(e);
            //判断点击了那个矩形
              
        }, false);

        // //给每个li项绑定点击事件

        //         $($as).on('click', function(){
        // //    this.
        //  //获取当前li项的index值
        //  pageNum = $(this).index() + 1;
        //  console.log();
        //  ctx.clearRect(0,0,82,82); 
        //  ctx.arc(r, r, cR, startAngle, tmpAngle);
        // //   cxt.clearRect(r,r,c.width,c.height);
        // //    rander()
        // })
        
        var clearT = null;
            // 除去首页显示下面页面
        function showPages(){
            clearTimeout(clearT);
            $('body').removeClass('ohidden');
            $('.firstPage').addClass('page-fadeOut');
            $('.pages').addClass('fadeIn');
            clearT = setTimeout(function(){
                $('body').removeClass('ohidden');
                $('.container a').css('color','#000');
                rander();
            },100)
            
        }

        // 节流阀
        var doScroll = true;
        // 识别鼠标滚轮
        function onMouseScroll(e){
            var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
            var delta = Math.max(-1, Math.min(1, wheel) );
            if(doScroll&&delta<0){//向下滚动
                showPages();
                doScroll = false;
            }else{//向上滚动
                // console.log('向上滚动');
            }    
        }
        

        
        $(document).on('mousewheel', onMouseScroll);
            
        // 首页点击显示下面页面
        $('#aKeyscroll').on('click',showPages)

        // 轮播.将img中的链接给li
        for(var i=0;i<$li.length;i++){
            // console.log($img[i])
            var dataSrc = $($img[i]).attr('data-src');
            
            $($li[i]).css('background','url("'+dataSrc+'") center center /cover no-repeat')
        }

        // $($as).on('click',function(){
        //     var i = $(this).index() + 1;
        //     rander(i);
        // })



        // 第四页的tab切换
        var $peas = $('.pages-employment .el-tab a');
        var $pecs = $('.pages-employment .el-content');
        $($peas).on('click',function(){
            $(this).addClass('active').siblings().removeClass('active');
            var i = $(this).index();
            $($pecs[i]).addClass('current').siblings().removeClass('current')
        })
    })
</script>
</html>